<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100px;
            height: 100px;
            background-color: springgreen;
            position: absolute;
            top: 100px;
            left: 100px;

            opacity: 0;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        const box = document.querySelector("div")
        box.onclick = function () {

            /* 多属性移动 => 一次可以移动跟多个属性 */
            moveFn(this, {
                "opacity": 1,
                'width': 600,
                'height': 400,
                'top': 400,
                'left': 600
            })
        }

        function moveFn(ele, moveObj) {
            //定义一个变量
            let count = 0;
            for (let key in moveObj) {
                //每循环一次,count++,总共有5次循环,那么count=5
                count ++;
                let type = key
                let target = moveObj[key]
                if (type == 'opacity') {
                    target *= 100;
                }
                let timer = setInterval(() => {
                    let current
                    if (type == 'opacity') {
                        current = window.getComputedStyle(ele)[type] * 100;
                    } else {
                        current = parseInt(window.getComputedStyle(ele)[type])
                    }
                    let step = (target - current) / 10
                    step = step > 0 ? Math.ceil(step) : Math.floor(step)
                    if (current == target) {
                        clearInterval(timer)
                        timer = null;
                        /* 
                            一旦将定时器停止了,那么我们代码就执行完毕,那你告诉
                            我的目的: 只能停止一次 就是下面的输出语句只能执行一次



                            我们这里有5个属性,因为for in 循环5次,所以会创建5个定时器,
                            当我们每一个属性终止的,那么当中的定时器就会停止,最终会停止5次
                            那我们现在目的只需要停止一次,才能干后面的事情

                            实现方案:
                                最后一个定时器停止了,那么我们就输出
                            实现步骤:
                                1. for in遍历的是对象当中属性,会遍历5次
                                当我们每循环一次时候,我们定义一个变量count 累计起来
                                循环5次,count就是5
                                2. 当定时器停止的时候,他会终止5次,当最后一个终止的时候,我们输出
                                    终止一次定时器,count --
                                    终止5次定时器的 count == 0
                                    if(count === 0){
                                        console.log("终止了")
                                    }
                        */
                        //每终止一次定时器,count--,当中count== 0,那么最后一个定时器执行完毕了
                        count --
                        if(count === 0){
                            console.log("代码执行完毕!");
                        }
                    } else {
                        if (type === 'opacity') {
                            ele.style[type] = (current + step) / 100;
                        } else {
                            ele.style[type] = current + step + "px";

                        }
                    }
                }, 16);
            }
        }

        /* 盒子移动 */
        // function move(ele, type, target) {
        //     if (type == 'opacity') {
        //         target *= 100;
        //     }
        //     let timer = setInterval(() => {
        //         let current
        //         if (type == 'opacity') {
        //             current = window.getComputedStyle(ele)[type] * 100;
        //         } else {
        //             current = parseInt(window.getComputedStyle(ele)[type])
        //         }
        //         let step = (target - current) / 10
        //         step = step > 0 ? Math.ceil(step) : Math.floor(step)
        //         if (current == target) {
        //             clearInterval(timer)
        //             timer = null;
        //         } else {
        //             if (type === 'opacity') {
        //                 ele.style[type] = (current + step) / 100;
        //             } else {
        //                 ele.style[type] = current + step + "px";

        //             }
        //         }
        //     }, 16);
        // }
    </script>
</body>

</html>